<template>

  <Card class="ll cpyszjy-page page-fill" style="height:800px">
    <div>产品映射参数</div>
    <div style="width:600px;margin:30px auto">
      <Row type="flex" align="middle">
        <Col span="8">产品大类:</Col>
        <Col span="14">
        <Select v-model="productType" label-in-value style="width:200px" @on-change="productTypeCheck">
          <Option v-for="item in productTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">版本:</Col>
        <Col span="16">
        <Input v-model="productVersion" placeholder="请输入" disabled style="width: 200px"></Input>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="8">渠道:</Col>
        <Col span="16">
        <Select v-model="channel" label-in-value style="width:200px" >
          <Option v-for="item in channelList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="height:32px">
        <Col span="8">期数:</Col>
        <Col span="16">
        <Select v-model="tenor" style="width:200px" >
          <Option v-for="item in tenorList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="height:32px">
        <Col span="8">评级:</Col>
        <Col span="16">
        <Select v-model="grate" style="width:200px" >
          <Option v-for="item in gradeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle" style="">
        <Col span="8">产品细类:</Col>
        <Col span="4">
        <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
        </Col>
        <Col span="12">
        <CheckboxGroup v-model="productValueList" @on-change="checkAllGroupChange">
          <Checkbox style="margin-top:10px" v-for="item in productList" :key="item.productCode" :label='item.productCode+":"+item.productName'>{{item.productName}}</Checkbox>
        </CheckboxGroup>
        </Col>
      </Row>
      <br>
      <Row type="flex" align="middle">
        <Col span="12" style="text-align:center">
        <Button type="primary" @click="conf" size="small" style="margin-left: 220px;">确认</Button>
        </Col>
        <Col span="12">
        <Button type="primary" @click="reback()" size="small" style="margin-left: 20px;">返回</Button>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<script>

export default {
  data () {
    return {
      indeterminate: true,
      checkAll: false,
      mark: '',
      productType: '',
      productTypeList: [],
      productVersion: '',
      tenor: '',
      tenorList: [],
      channel: '',
      channelName: '',
      channelList: [],
      grate: '',
      gradeList: [],
      productValueList: [],
      productList: [],
      productCodeList: [],
      productTypeName: ''
      // productType: ''
    }
  },
  created () {
    var vm = this
    this.$ajax = this.$util.ajax(this.$appContext.marvels_core_product)
    // 产品大类查询
    this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/findProductMappedSelector', {}).then(re => {
      var allData = re.data.data
      if (allData && allData.products && allData.products.length > 0) {
        for (var i = 0; i < allData.products.length; i++) {
          vm.productTypeList.push({
            value: allData.products[i].productType,
            label: allData.products[i].productTypeName
          })
        }
      }
      if (allData && allData.customerTypes && allData.customerTypes.length > 0) {
        allData.customerTypes.forEach(item => {
          vm.gradeList.push(
            {
              value: item.customerType,
              label: item.customerTypeDesc
            }
          )
        })
      }
    })
  },
  methods: {
    reback () {
      var vm = this
      vm.$router.push('productMapped')
    },
    searchByParams () {
      let vm = this
      let params = {}
      params.productType = vm.productType
      params.tenor = vm.tenor
      params.grate = vm.grate
      params.channel = vm.channel
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchByParams', params).then(re => {
        vm.productList = re.data.data
      }).catch(er => {})
    },
    productTypeCheck (data) {
      var vm = this
      // 查询生效版本
      vm.productType = data.value
      vm.productTypeName = data.label
      vm.productList = []
      vm.productVersion = ''

      vm.tenor = null
      vm.channel = null
      vm.grate = null

      vm.productCodeList = []
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProductVersion', {
        productType: vm.productType,
        isValid: '0'
      })
        .then(re => {
          vm.productVersion = re.data.data[0].productVersion
          // 查询生效版本
          this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchByVersion', {
            productType: vm.productType,
            productVersion: vm.productVersion
          })
            .then(re => {
              vm.productList = re.data.data
              for (var i = 0; i < re.data.data.length; i++) {
                vm.productCodeList.push(
                  re.data.data[i].productCode +
                  ':' +
                  re.data.data[i].productName
                )
              }
            })
            .catch(er => { })
          // 渠道和期数
          var tenorTmp = []
          var channelTmp = []
          this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchChannelAndTerm', { productType: vm.productType })
            .then(re => {
              for (var i = 0; i < re.data.data.termList.length; i++) {
                tenorTmp.push({
                  value: re.data.data.termList[i].term + '',
                  label: re.data.data.termList[i].term + '期'
                })
              }
              for (let i = 0; i < re.data.data.channelList.length; i++) {
                channelTmp.push({
                  value: re.data.data.channelList[i].channelCode,
                  label: re.data.data.channelList[i].channelName
                })
              }
              vm.tenorList = tenorTmp
              vm.channelList = channelTmp
            })
            .catch(er => { })
        })
        .catch(er => { })
    },
    checkAllGroupChange (data) {
      var vm = this
      if (data.length === vm.productCodeList.length) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    },
    // 全选
    handleCheckAll () {
      var vm = this
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false

      if (this.checkAll) {
        this.productValueList = vm.productCodeList
      } else {
        this.productValueList = []
      }
    },
    conf () {
      var vm = this
      if (vm.productType === '') {
        this.$Message.warning('请选择产品大类')
        return
      }
      if (vm.version === '') {
        this.$Message.warning('版本不能为空')
        return
      }
      if (vm.channel === '') {
        this.$Message.warning('请选择渠道')
        return
      }
      if (vm.tenor === '') {
        this.$Message.warning('请选择期数')
        return
      }
      if (vm.productValueList.length === 0) {
        this.$Message.warning('请选择产品细类')
        return
      }
      var productValueList = []
      for (var i = 0; i < vm.productValueList.length; i++) {
        productValueList.push({
          productName: vm.productValueList[i].split(':')[1],
          productCode: vm.productValueList[i].split(':')[0]
        })
      }
      let gradeLen = vm.gradeList.length
      let gradeParamName = ''
      for (let n = 0; n < gradeLen; n++) {
        let val = vm.gradeList[n].value
        if (val === vm.grate) {
          gradeParamName = vm.gradeList[n].label
        }
      }
      var param = {
        productType: vm.productType,
        productTypeName: vm.productTypeName,
        productVersion: vm.productVersion,
        channel: vm.channel,
        channelName: vm.channelName,
        tenor: vm.tenor,
        productValueList: productValueList,
        grate: vm.grate,
        grateName: gradeParamName
      }
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/addproductMapped', param)
        .then(re => {
          if (re.data.code === 'success') {
            this.$Message.success(re.data.data)
            this.$router.push('productMapped')
          }
        })
        .catch(er => { })
    },
    channelCheck (data) {
      this.channel = data.value
      this.channelName = data.label
    }
  }
}
</script>

<style lang="less">
.cpyszjy-page {
  .ll {
  }
  #middle {
    margin: 100px auto;
    width: 500px;
  }
  #middle .v-form-label {
    font-size: 15px;
  }
  #middle .versionNum {
    width: 80px;
  }
  #middle .channel {
    font-size: 12px;
  }
  .bt {
    margin: 10px 71px;
  }
  .check {
    display: inline-block;
  }
  .termRange {
    margin-right: 20px;
  }
  .v-tag {
    padding: 6px 10px;
    min-width: 10px;
  }
  #tagContainer {
    margin-top: 10px;
  }
  .middiv {
    display: inline-block;
    width: 118px;
  }
  .v-checkbox {
    margin: 15px 20px 6px 15px;
    display: inline-block;
  }
}
</style>
